<script setup lang="ts">
import { ref } from "vue";
import JsonFormatter from "./components/JsonFormatter.vue";
import CaseConverter from "./components/CaseConverter.vue";
import Base64Converter from "./components/Base64Converter.vue";
import TimestampConverter from "./components/TimestampConverter.vue";
import TextDiff from "./components/TextDiff.vue";

// 菜单状态
const currentMenu = ref('json');
const isSidebarCollapsed = ref(false);

const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value;
};
</script>

<template>
  <div class="app-container">
    <div class="sidebar" :class="{ 'collapsed': isSidebarCollapsed }">
      <div class="sidebar-header">
        <div class="menu-title" v-show="!isSidebarCollapsed">功能菜单</div>
        <button class="collapse-btn" @click="toggleSidebar">
          <span v-if="isSidebarCollapsed">›</span>
          <span v-else>‹</span>
        </button>
      </div>
      <div 
        class="menu-item" 
        :class="{ active: currentMenu === 'json' }"
        @click="currentMenu = 'json'"
      >
        <span class="menu-icon">{ }</span>
        <span class="menu-text" v-show="!isSidebarCollapsed">JSON 格式化</span>
      </div>
      <div 
        class="menu-item" 
        :class="{ active: currentMenu === 'case' }"
        @click="currentMenu = 'case'"
      >
        <span class="menu-icon">Aa</span>
        <span class="menu-text" v-show="!isSidebarCollapsed">字符串大小写</span>
      </div>
      <div 
        class="menu-item" 
        :class="{ active: currentMenu === 'base64' }"
        @click="currentMenu = 'base64'"
      >
        <span class="menu-icon">64</span>
        <span class="menu-text" v-show="!isSidebarCollapsed">Base64 编解码</span>
      </div>
      <div 
        class="menu-item" 
        :class="{ active: currentMenu === 'timestamp' }"
        @click="currentMenu = 'timestamp'"
      >
        <span class="menu-icon">⏰</span>
        <span class="menu-text" v-show="!isSidebarCollapsed">时间戳转换</span>
      </div>
      <div 
        class="menu-item" 
        :class="{ active: currentMenu === 'text-diff' }"
        @click="currentMenu = 'text-diff'"
      >
        <span class="menu-icon">⇄</span>
        <span class="menu-text" v-show="!isSidebarCollapsed">文本对比</span>
      </div>
    </div>
    <div class="main-content" :class="{ 'expanded': isSidebarCollapsed }">
      <JsonFormatter v-if="currentMenu === 'json'" />
      <CaseConverter v-if="currentMenu === 'case'" />
      <Base64Converter v-if="currentMenu === 'base64'" />
      <TimestampConverter v-if="currentMenu === 'timestamp'" />
      <TextDiff v-if="currentMenu === 'text-diff'" />
    </div>
  </div>
</template>

<style>
:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #0f0f0f;
  background-color: #f6f6f6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.app-container {
  display: flex;
  width: 800px;
  height: 600px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.sidebar {
  width: 160px;
  background-color: #2c3e50;
  color: white;
  padding: 15px 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed {
  width: 50px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 15px;
}

.collapse-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collapse-btn:hover {
  background-color: #34495e;
}

.main-content {
  flex: 1;
  padding: 15px;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: calc(800px - 160px);
  transition: width 0.3s ease;
}

.main-content.expanded {
  width: calc(800px - 50px);
}

.menu-title {
  font-size: 16px;
  font-weight: bold;
  color: #ecf0f1;
  white-space: nowrap;
  overflow: hidden;
}

.menu-item {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
  white-space: nowrap;
  overflow: hidden;
}

.menu-item:hover {
  background-color: #34495e;
}

.menu-item.active {
  background-color: #3498db;
}

.menu-icon {
  margin-right: 8px;
  font-size: 16px;
  min-width: 24px;
  text-align: center;
}

.menu-text {
  font-size: 13px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #f6f6f6;
    background-color: #2f2f2f;
  }

  .main-content {
    background-color: #1a1a1a;
  }
}
</style>